<!DOCTYPE html>
<html>
<head>
	<title>快速排序</title>
	<meta charset="utf-8">
	<script type="text/javascript">
	   var btn = document.getElementById("resultBtn");            //结果输出按钮
       var inputnum = document.getElementById("number");        //数字输入框
       var resultlbl =document.getElementsByTagName("label");    //结果显示的label 
       var i,j,temp;
       var quickSort = function(arr) {
　　if (arr.length <= 1) {//如果数组长度小于等于1无需判断直接返回即可 
        return arr;
    }
　　var pivotIndex = Math.floor(arr.length / 2);//取基准点 
　　var pivot = arr.splice(pivotIndex, 1)[0];//取基准点的值,splice(index,1)函数可以返回数组中被删除的那个数
　　var left = [];//存放比基准点小的数组
　　var right = [];//存放比基准点大的数组 
　　for (var i = 0; i < arr.length; i++){ //遍历数组，进行判断分配 
　　　　if (arr[i] < pivot) {
　　　　　　left.push(arr[i]);//比基准点小的放在左边数组 
　　　　} else {
　　　　　　right.push(arr[i]);//比基准点大的放在右边数组 
　　　　}
　　}
         //递归执行以上操作,对左右两个数组进行操作，直到数组长度为<=1； 
　　return quickSort(left).concat([pivot], quickSort(right));
}
    //判断输入的值类型是否为数字
     function isNum(num){
        var reNum =/^[0-9]+$/;
        return (reNum.test(num));
     }

      //按钮点击事件
          btn.onclick = function(){
         //判断输入的值的类型和长度以及是否为空
         if(!isNum(inputnum.value) || inputnum.value == "" || inputnum.value.length > 10 || inputnum.value.length < 10){
             resultlbl[0].innerHTML = "Your format is wrong![Must Be 10 numbers]";
             resultlbl[0].style.color = "red";
         }
         else{
             resultlbl[0].innerHTML = "After Sorted:";
             resultlbl[0].style.color = "black";
             var inputstream = inputnum.value.toString();    //将输入的内容转换为字符串
             var data = inputstream.split("");                //将转换的字符串分割，相当于转化为数组
             
             //结果输出
             resultlbl[1].innerHTML = "BubbleSort:" + "<br/>" + bubble(data);
             resultlbl[2].innerHTML = "InsertSort:" + "<br/>" + insersort(data);
             resultlbl[3].innerHTML = "QuickSort:" + "<br/>" + quickSort(data);
         }
     }
 }


  
	</script>
	<style type="text/css">
     *{
     margin: 0;
     padding: 0;
     list-style: none;
      }
 	.container{
     width: 400px;
     margin: 100px auto;
 	}
	input[type="text"]{
     display: block;
     width: 400px;
     height: 40px;
     text-align: center;
     line-height: 40px;
     outline: none;
     font-size: 14px;
     border-radius: 15px;
     border: 1px solid #aaaaaa;
 	}
 	.sortbtn{
     display: block;
     width: 200px;
     height: 34px;
     text-align: center;
     line-height: 34px;
     border: 1px solid black;
     border-radius: 10px;
     text-decoration: none;
     color: black;
     margin-left: 100px;
     margin-top: 30px;
 	}
 	.sortbtn:hover{
     display: block;
     background-color: black;
     color: #ffffff;
 	}
 	label{
     display: block;
     width: 200px;
     text-align: center;
     margin-left: 100px;
     margin-top: 20px;
     font-size: 20px;
 	}
	</style>
</head>
<body>
  <!--主要页面结构-->
     <div class="container">
        <input type="text" name="number" id="number" placeholder="Please enter 10 numbers(don't leave space)" />
         <a href="javascript:void()" class="sortbtn" id="resultBtn">Sort</a>
         <label class="title">After Sorted:</label>
 
         <!--以下label显示快速排序的结果-->
         <label class="result" for="quicksort"></label>
     </div>
</body>
</html>